<template>
	<div>
				<div class="bootom">
					<!-- <router-view /> -->
					<van-tabbar route active-color="#ee0a24" inactive-color="#000">
						<van-tabbar-item>
							<div class="dianji" @click="fun">
								<img :src="img1" alt="" ref="imgs">
							</div>
						</van-tabbar-item>
						<van-tabbar-item>
							<!-- eplace to="/lei" -->
							<img :src="v1" alt="">
							<p>购物车</p>
						</van-tabbar-item>
						<van-tabbar-item>
							<img :src="v2" alt="">
							<p>我的淘宝</p>
						</van-tabbar-item>
					</van-tabbar>
				</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			img1: 'https://img.alicdn.com/imgextra/i3/O1CN01r7d0bs1XQwqepToWX_!!6000000002919-2-tps-108-108.png ',
			img2: "https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png",
			v1: " https://img.alicdn.com/imgextra/i3/O1CN0151qDFg2AN4Vma3SdE_!!6000000008190-2-tps-63-63.png",
			v2: "https://img.alicdn.com/imgextra/i3/O1CN01nOAkIZ1ou7XqRzXEZ_!!6000000005284-2-tps-63-63.png",
		}
	},
	methods: {
		fun() {
			window.scrollTo({ top: 0, behavior: 'smooth' })
			this.$refs.imgs.src = this.img2

		}
	}
}
</script>

<style scoped>
.dianji {
	position: relative;
	left: 0;
	top: 0;
	height: 36px;
	width: 36px;
	background-image: linear-gradient(90deg, #FF8002 0%, #FF5900 100%);
	background-size: 36px 36px;
	border-radius: 50%;
}

.dianji img {
	position: absolute;
	top: 4px;
	left: -7px;
}
.van-tabbar {
	height: .88rem;
}

.van-tabbar-item__text .dianji img {
	width: .72rem;
	height: .72rem;
}

.van-tabbar-item__text img {
	width: .4rem;
	margin-top: -5px;
	margin-left: 8px;
}

.van-tabbar-item__text p {
	margin-top: 3px;
	margin-left: 4px;
}

::v-deep .van-tabbar-item__text :nth-child(3) {
	margin-left: -9px;
}
</style>